<template>
	<view id="orderPage">
		<view class="address-wrapper" @click="toAdr">
			<view class="address-title">
				<view class="user-name">
					唐先生
				</view>
				<view class="user-tel">
					123****8910
				</view>
			</view>
			<view class="address">
				广东省深圳市南山区京开路与通海路交叉口
			</view>
			<image class="arrow" src="../../static/img/nav-arrow.png" mode="aspectFill"></image>
		</view>
		<image src="../../static/img/line.png" class="line" mode="aspectFill"></image>
		<view class="product-list border-top">
			<view class="list-title">
				产品清单
			</view>
			<view class="product-item" v-for="item in list" :key="item">
				<image class="goods" src="../../static/img/goods.png" mode="aspectFill"></image>
				<view class="product-con">
					<view class="goods-title">
						A580进口高速防滑传动带
					</view>
					<view class="goods-intro">
						尺寸:4120(mm)，材质:橡胶，样式:三角带
					</view>
					<view class="goods-footer">
						<view class="goods-price">
							<text class="unit">￥</text>
							<text class="val">299.00</text>
						</view>
						<view class="count">
							x100
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="invoice border-top">
			<view class="form-label">
				是否需要发票
			</view>
			<view class="radio-wrapper" @click="doCheck">
				<image class="check-ico" src="../../static/img/Btn_select.png" mode="aspectFill" v-if="!need" key="noCheck"></image>
				<image class="check-ico" src="../../static/img/Btn_select_per.png" mode="aspectFill" v-else key="noChecked"></image>
				<text class="radio-txt">否</text>
			</view>
			<view class="radio-wrapper" @click="doCheck">
				<image class="check-ico" src="../../static/img/Btn_select.png" mode="aspectFill" v-if="need" key="yesCheck"></image>
				<image class="check-ico" src="../../static/img/Btn_select_per.png" mode="aspectFill" v-else key="yesChecked"></image>
				<text class="radio-txt">是</text>
			</view>
		</view>
		<view class="product-detail border-top">
			<view class="row">
				<view class="form-label">
					产品价格
				</view>
				<view class="form-val">
					￥89.00
				</view>
			</view>
			<!-- <view class="row">
				<view class="form-label">
					运费
				</view>
				<view class="form-val">
					￥30.00
				</view>
			</view> -->
			<view class="row">
				<view class="form-label">
					税费(17%)
				</view>
				<view class="form-val">
					￥399.00
				</view>
			</view>
		</view>
		<view class="discount border-top">
			<view class="form-label">
				优惠券
			</view>
			<view class="discount-nav" @click="toCoupon">
				<text>已选择100元优惠券</text>
				<image class="arrow" src="../../static/img/arrow.png" mode="aspectFill"></image>
			</view>
		</view>
		
		<view class="pay-footer">
			<view class="total">
				<text>总计：</text>
				<text class="price">￥299.00</text>
			</view>
			<view class="wx-pay" @click="doPay">
				微信支付
			</view>
		</view>
		<pay v-if="showPay" @close="payClose" name="传动带上传订单支付" price="290.00"></pay>
	</view>
</template>

<script>
	import pay from "@/components/pay/pay.vue"
	export default {
		components: {pay},
		data() {
			return {
				list: 2,
				noChecked: false,
				yesChecked: true,
				showPay: false,
				need: false,
			}
		},
		methods: {
			toAdr() {
				uni.navigateTo({
					url: '../addressManager/addressManager',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toCoupon() {
				uni.navigateTo({
					url: '../coupon/coupon'
				})
			},
			doCheck() {
				this.need = !this.need
			},
			doPay() {
				this.showPay = true
			},
			payClose() {
				this.showPay = false
			}
		}
	}
</script>

<style>
.address-wrapper {
	height: 135upx;
	padding: 25upx 26upx 0 24upx;
	position: relative;
}
.address-title {
	height: 28upx;
	display: flex;
	font-size:28upx;
	font-weight:500;
	color:rgba(51,51,51,1);
	margin-right: 31upx;
}
.address {
	font-size:24upx;
	font-weight:400;
	color:rgba(122,122,122,1);
	margin: 28upx 0 0 0;
}
.arrow {
	width: 15upx;
	height: 25upx;
	position: absolute;
	top: 55upx;
	right: 26upx;
}
.line {
	display: block;
	height: 4upx;
	width: 100%;
}
.border-top {
	border-top: 20upx solid rgb(246,246,246);
	padding-left: 24upx;
}
.product-list {
	padding-top: 29upx;
	padding-bottom: 30upx;
}
.product-item {
	height: 159upx;
	display: flex;
	margin: 26upx auto 3upx;
}
.goods {
	width: 159upx;
	height: 159upx;
	flex: 1 159upx 0;
}
.product-con {
	flex: 3;
	padding-left: 23upx;
}
.goods-title {
	font-size:30upx;
	font-weight:500;
	color:rgba(51,51,51,1);
	padding-top: 7upx;
}
.goods-intro {
	font-size:24upx;
	font-family:PingFang SC;
	font-weight:500;
	color:rgba(102,102,102,1);
	margin-top: 10upx;
}
.goods-footer {
	font-size:24upx;
	font-weight:500;
	color:rgba(102,102,102,1);
	margin: 20upx 25upx 0 0;
	display: flex;
	justify-content: space-between;
}
.goods-price {
	font-size:34upx;
	font-weight:bold;
	color:rgba(234,10,42,1);
}
.unit {
	font-size: 24upx;
}
.count {
	font-size:24upx;
	font-weight:500;
	color:rgba(102,102,102,1);
	transform: translateY(12upx);
}
.product-detail {
	margin: 36upx 0 0 0;
	padding-bottom: 29upx;
}
.row {
	font-size:28upx;
	font-weight:500;
	display: flex;
	justify-content: space-between;
	margin: 30upx 26upx 0 0;
}
.form-label {
	color: #666666;
}
.discount {
	/* height: 70upx; */
	display: flex;
	justify-content: space-between;
	/* align-items: center; */
	font-weight:500;
	color:rgba(102,102,102,1);
	position: relative;
	min-height: 198upx;
	padding-top: 10upx;
}
.discount-nav {
	color: #EA0A2A;
	padding-right: 76upx;
}
.discount .arrow {
	top: 24upx;
}
.invoice {
	padding: 36upx 0 0 24upx;
	display: flex;
	/* min-height: 198upx; */
}
.radio-wrapper {
	margin-left: 64upx;
}
.radio-txt {
	margin-left:30upx;
}
.pay-footer {
	height: 85upx;
	border-top: 1upx solid #E6E6E6;
	display: flex;
	line-height: 85upx;
	font-size: 26upx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
}
.total {
	padding-left: 29upx;
	color: #333333;
	flex: 3 537upx 0;
	width: 537upx;
}
.wx-pay {
	width:213upx;
	height:85upx;
	background:rgba(0,197,83,1);
	color: #FFFFFF;
	text-align: center;
	flex: 1 213upx 0;
}
</style>
